<script lang="ts">
export default {
  name: "CustomHeader",
};
</script>

<script setup lang="ts">
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";

interface topTitleProps {
  title?: string;
  leftIcon?: string;
  leftText?: string;
  rightText?: string;
  color?: string;
}

// 携带默认值的props
withDefaults(defineProps<topTitleProps>(), {
  title: "",
  leftIcon: "arrow-left",
  leftText: "",
  rightText: "",
  color: "#333",
});

const emit = defineEmits(["clickLeft", "clickRight"]);

const route = useRoute();
const router = useRouter();
const active = ref(0);

const clickLeft = () => {
  if (window.history.length > 1) {
    router.back();
  } else {
    router.push("/");
  }
};
const clickRight = () => {
  emit("clickRight");
};
</script>

<template>
  <van-sticky>
    <van-nav-bar
      :title="title"
      @click-left="clickLeft"
      @click-right="clickRight"
      left-arrow
    >
      <template #left>
        <van-icon :color="color" size="20" :name="leftIcon" /><span
          :style="color"
          >{{ leftText }}</span
        >
      </template>
      <template @click-right="onClickRight" #right>
        <span :style="color">{{ rightText }}</span>
      </template>
    </van-nav-bar>
  </van-sticky>
</template>



<style lang="scss" scoped>
</style>